<message message="vm.message"></message>
<div class="main_div">
  <div class="title_text margin_bottom_30 text_center">{{::vm.connectionDetails}}</div>
    <div class="middle_div margin_bottom_10">
      <div class="margin_bottom_30">
        <label for="connectionType" class="margin_bottom_5 text_left">{{::vm.connectionTypeLabel}}</label>
        <selectbox id="connectionType" type="vm.connectionType" options="vm.connectionTypes" on-select="vm.onSelectOfConnectionType(value)"></selectbox>
      </div>
      <div ng-switch="vm.connectionType">
        <div class="" ng-switch-when="1">
          <div class="margin_bottom_15">
            <label for="accessKeyMinio" class="margin_bottom_5 block text_left">{{::vm.accessKey}}</label>
            <input id="accessKeyMinio" class="block" type="password" size="50" ng-model="vm.data.model.accessKey" showpassword>
          </div>
          <div class="margin_bottom_15">
            <label for="secretKeyMinio" class="margin_bottom_5 block text_left">{{::vm.secretKey}}</label>
            <input id="secretKeyMinio" class="block" type="password" size="50" ng-model="vm.data.model.secretKey"
                  showpassword>
          </div>
          <div class="margin_bottom_15">
              <label for="endpoint" class="margin_bottom_5 block text_left">{{::vm.endpoint}}</label>
              <input id="endpoint" class="block" type="text" size="50" ng-model="vm.data.model.endpoint">
          </div>
          <div class="margin_bottom_15">
              <label for="signatureVersion" class="margin_bottom_5 block text_left">{{::vm.signatureVersion}}</label>
              <input id="signatureVersion" class="block" type="text" size="50" ng-model="vm.data.model.signatureVersion">
          </div>
            <div class="margin_bottom_15">
              <input id="pathStyleAccess" type="checkbox" ng-model="vm.data.model.pathStyleAccess" ng-checked="vm.data.model.pathStyleAccess==='true'"  ng-true-value="'true'" ng-false-value="'false'" />
              <label class="check-box-label" for="pathStyleAccess">{{::vm.pathStyleAccess}} </label>
            </div>
            <div class="margin_bottom_15">
              <input id="defaultS3ConfigMinio" type="checkbox" ng-model="vm.data.model.defaultS3Config" ng-checked="vm.data.model.defaultS3Config==='true'" ng-true-value="'true'" ng-false-value="'false'" />
              <label class="check-box-label" for="defaultS3ConfigMinio">{{::vm.defaultS3Config}}</label>
            </div>
        </div>
        <div class="" ng-switch-when="0">
          <div class="margin_bottom_30">
            <label for="authenticationType" class="margin_bottom_5 text_left">{{::vm.authenticationType}}</label>
            <selectbox id="authenticationType" type="vm.type" options="vm.authTypes" on-select="vm.onSelectOfAuthType(value)"></selectbox>
          </div>
          <div class="scroll-form">
            <div ng-if="vm.type==0">
              <div class="margin_bottom_15">
                <label for="region" class="margin_bottom_5 text_left">{{::vm.regionLabel}}</label>
                <selectbox id="region" type="vm.region" options="vm.regions" on-select="vm.onSelectRegion(value)"></selectbox>
              </div>
              <div class="margin_bottom_15">
                <label for="accessKey" class="margin_bottom_5 block text_left">{{::vm.accessKey}}</label>
                <input id="accessKey" class="block" type="password" size="50" ng-model="vm.data.model.accessKey" showpassword>
              </div>
              <div class="margin_bottom_15">
                <label for="secretKey" class="margin_bottom_5 block text_left">{{::vm.secretKey}}</label>
                <input id="secretKey" class="block" type="password" size="50" ng-model="vm.data.model.secretKey"
                      showpassword>
              </div>
              <div class="margin_bottom_15">
                <label for="sessionToken" class="margin_bottom_5 block text_left">{{::vm.sessionToken}}</label>
                <input id="sessionToken" class="block" type="password" size="50" ng-model="vm.data.model.sessionToken"
                      showpassword>
              </div>
              <div class="margin_bottom_15">
                <input id="defaultS3Config" type="checkbox" ng-model="vm.data.model.defaultS3Config" ng-checked="vm.data.model.defaultS3Config==='true'" ng-true-value="'true'" ng-false-value="'false'" />
                <label class="check-box-label" for="defaultS3Config">{{::vm.defaultS3Config}}</label>
              </div>
            </div>
          </div>
          <div ng-if="vm.type==1">
            <div class="margin_bottom_15">
              <label for="region" class="margin_bottom_5 text_left">{{::vm.regionLabel}}</label>
              <selectbox id="region" type="vm.region" options="vm.regions" on-select="vm.onSelectRegion(value)"></selectbox>
            </div>
            <div class="margin_bottom_15">
              <label for="profileName" class="margin_bottom_5 block text_left">{{::vm.profileName}}</label>
              <input id="profileName" class="block" type="text" size="50" ng-model="vm.data.model.profileName">
            </div>
            <div class="margin_bottom_15">
              <label for="credentialsFilePath" class="margin_bottom_5 block text_left">{{::vm.fileLocation}}</label>
              <div class="file-input">
                <input id="credentialsFilePath" class="block" type="text" size="50" ng-model="vm.data.model.credentialsFilePath">
                <button class="primary browse" ng-click="vm.onBrowse()">{{::vm.browse}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <controls buttons="vm.buttons"></controls>
  </div>
</div>
